<template>
  <div class="echarts-container">
    <h1>pie</h1>
    <div id="main" class="main" style="width: 500px; height: 600px"></div>
  </div>
</template>
<script lang="ts">
/**
 * echarts
 * x轴 ： xAxis
 * y轴 ：yAxis
 * 数据：series
 *
 * 动态组件
 *
 */
import * as echarts from 'echarts'
import { defineComponent, onMounted, reactive, PropType } from 'vue'
type SeriesType = { node: string; type: string; data: any[] }
type ListItemType = { value: string; name: string }
export default defineComponent({
  props: {
    list: {
      type: Array as PropType<ListItemType[]>
    }
  },
  setup(props, context) {
    console.log('props:', props.list)
    const state = reactive({
      titleList: ['柱状图', '饼状图']
    })
    console.log('created:', document.getElementById('main'))
    onMounted(() => {
      // 绘制pie
      drawEarchs({
        node: 'main',
        type: 'pie',
        data: props.list || []
      })
    })

    const drawEarchs = ({ node, type, data }: SeriesType) => {
      //  基于准备好的dom，初始化echarts实例
      const dom = document.getElementById(node)
      if (dom) {
        var myChart = echarts.init(dom)
        // 绘制图表
        myChart.setOption({
          title: {
            text: 'ECharts 入门示例'
          },
          tooltip: {},
          xAxis: {
            data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
          },
          yAxis: {},
          series: [
            {
              name: '销量',
              type: type,
              data
            }
          ]
        })
      }
    }

    return {
      state
    }
  }
})
</script>
